<template>
	<view v-if="isLoad">
		<back :showBackText="false" customClass="bg-gradual-blue text-white" title="课程详情"></back>
		<view class="cu-bar bg-white margin-top-xs solid-bottom" style="margin-buttom: 3rpx;">
			<view class="action sub-title">
				<text class="text-xl text-bold text-blue text-shadow">基础信息</text>
				<text class="text-ABC text-blue">BASIC</text>
			</view>
		</view>
		<view class="flex flex-direction" style="min-height: 100vh;">
			<view class="flex-sub" style="margin-bottom: 270rpx;">
				<view class="cu-list menu">
					<view class="cu-item" style="font-size: 32rpx;">
						<view class="content">
							<text class="cuIcon-infofill text-blue"></text>
							<text class="text-black">课程名称</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-green light">{{info.name}}{{info.code}}</view>
						</view>
					</view>
					<view class="cu-item" style="font-size: 32rpx;" v-if="info.id">
						<view class="content">
							<text class="cuIcon-cuIcon text-blue"></text>
							<text class="text-black">课程编码</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-green light">{{info.code ? info.code:info.id}}</view>
						</view>
					</view>
					<view class="cu-item" style="font-size: 32rpx;">
						<view class="content">
							<text class="cuIcon-group_fill text-blue"></text>
							<text class="text-black">课程分类</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-green light">{{info.category_name}}</view>
						</view>
					</view>
					<view class="cu-item" style="font-size: 32rpx;">
						<view class="content">
							<text class="cuIcon-formfill text-blue"></text>
							<text class="text-black">课程描述</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-green light">{{info.desc}}</view>
						</view>
					</view>
				</view>
				<view class="cu-list grid col-3 no-border" style="margin-top: 10rpx;">
					<view class="cu-item menu-item" style="padding: 0;" @tap="onErrorQuestion">
						<view class="cuIcon-roundclose" style="font-size: 50rpx;color: #37c0fe;"></view>
						<text style="font-size: 28rpx;">我的错题</text>
					</view>
					<view class="cu-item menu-item" style="padding: 0;"  @tap="onCollect">
						<view class="cuIcon-favor" style="font-size: 50rpx;color: #e54d42;"></view>
						<text style="font-size: 28rpx;">{{info.collect==1 ? '已收藏':'收藏课程'}}</text>
					</view>
					<view class="cu-item menu-item" style="padding: 0;" @tap="onNote">
						<view class="text-black cuIcon-write"></view>
						<text class="font-size: 28rpx;">我的笔记</text>
					</view>
				</view>
				<view class="cu-bar bg-white margin-top-xs solid-bottom" style="margin-buttom: 3rpx;">
					<view class="action sub-title">
						<text class="text-xl text-bold text-blue text-shadow">题库练习</text>
						<text class="text-ABC text-blue">PRACTICE</text>
					</view>
				</view>
				<view class="cu-list grid col-2 ">
					<view class="cu-item menu-item" @tap="onOrderPractice" style="flex-direction: row-reverse;">
						<view class="text-blue fa-icon fa-sort-alpha-asc" style="width: 100%;margin-top: 28rpx;font-size: 32rpx"></view>
						<text class="text-bold text-xl"
							style="width: 100%;margin-top: 28rpx;color: black;font-size: 28rpx;margin-left: 8rpx;">顺序练习</text>
					</view>
					<view class="cu-item menu-item" @tap="onQuestionTypePractice" style="flex-direction: row-reverse;">
						<view class="text-blue cuIcon-filter"></view>
						<text class="text-bold text-xl"
							style="width: 100%;margin-top: 28rpx;color: black;font-size: 28rpx;margin-left: 8rpx;">题型练习</text>
					</view>
					<view class="cu-item menu-item" @tap="onCategory(item)" v-for="(item, index) in categoryList"
						style="flex-direction: row-reverse" :key="index">
						<view :class="item.icon" class="text-blue"></view>
						<text class="text-bold text-xl"
							style="width: 100%;margin-top: 28rpx;color: black;font-size: 28rpx;margin-left: 8rpx;">{{ item.name }}</text>
					</view>
					<view class="cu-item menu-item" @tap="onSearchQuestion" style="flex-direction: row-reverse">
						<view class="text-blue cuIcon-searchlist"></view>
						<text class="text-bold text-xl"
							style="width: 100%;margin-top: 28rpx;color: black;font-size: 28rpx;margin-left: 8rpx;">搜索试题</text>
					</view>
					<view class="cu-item menu-item" @tap="onColl" style="flex-direction: row-reverse">
						<view class="text-blue cuIcon-favor"></view>
						<text class="text-bold text-xl"
							style="width: 100%;margin-top: 28rpx;color: black;font-size: 28rpx;margin-left: 8rpx;">收藏题目</text>
					</view>
				</view>
			</view>
			<view class="bottom-layout cu-bar bg-white tabbar border shop">
				<button class="action text-blue" open-type="share">
					<view class="cuIcon-forwardfill"></view>
					<text class="text-sm text-blue">分享课程</text>
				</button>
				<view class="action text-gray" style="display: none;" v-if="!checkAppIsAudit" @tap="onNotSupport">
					<view class="cuIcon-lock"></view>
					<text class="text-sm text-gray">考前押密</text>
				</view>
				<view class="action text-gray"  v-if="!checkAppIsAudit" style="display: none;" @tap="onNotSupport">
					<view class="cuIcon-video"></view>
					<text class="text-sm text-gray">在线网课</text>
				</view>
				<view class="action text-blue" @tap="onLearn" data-type="5">
					<view class="cuIcon-file"></view>
					<text class="text-sm text-blue">资料下载</text>
				</view>
				<view v-if="!checkAppIsAudit && !isIosVirtualPay && !info.isCourseVip" @tap="onBuyCourse"
					class="action text-blue">
					<view class="cuIcon-pay"></view>
					<text class="text-sm ">开通题库</text>
				</view>
				<view @tap="showActivateModal = true"  v-if="!checkAppIsAudit && !isIosVirtualPay && !info.isCourseVip"   class="action text-blue">
					<view class="cuIcon-unlock"></view>
					<text class="text-sm text-blue">激活题库</text>
				</view>
			</view>
		</view>


		<!-- 激活题库弹窗 -->
		<activate-modal 
			:show.sync="showActivateModal" 
			title="激活题库" 
			:business-id="info.id" 
			business-type="2" 
			@showService="showOnlineServiceTap" 
			@success="onActivateSuccess"
		></activate-modal>
	</view>
</template>
<style src="./detail.css"></style>
<script>
let app = getApp();
let that = null;
import {
	get
} from "@/common/js/http.js";
import faIcon from "@/components/kilvn-fa-icon/fa-icon.vue"
import confirm from "@/components/confirm/confirm.vue"
import activateModal from "@/components/activateModal/activateModal.vue"

export default {
	components: {
		faIcon,
		confirm,
		activateModal
	},
	data() {
		return {
			info: [],
			isLoad: false,
			categoryList: [],
			checkAppIsAudit: true,
			isIosVirtualPay: true,
			showActivateModal: false,
			activateCode: '',
			showOnlineServiceNotice: false
		};
	},
	onLoad(options) {
		that = this;
		that.getInfo(options.id);
	},
	onShow(options) {
		app.globalData.showShareMenu();
		that.checkAppIsAudit = app.globalData.checkAppIsAudit();
		that.isIosVirtualPay = app.globalData.checkIsIosVirtualPay();
	},
	onShareAppMessage() {
		let info = that.info;
		let config = app.globalData.getShareConfig();
		config.title = info.name;
		config.path = '/pages/search/course/detail?id=' + info.id;
		return config;
	},
	methods: {
		async getInfo(id) {
			app.globalData.server
				.getRequest('course/getInfo', {
					id: id
				})
				.then(function(res) {
					let item = res.data;
					that.setData({
						info: item,
						isLoad: true
					});
				})
				.catch(function(res) {
					app.showToast('获取信息失败');
				});
			const categoryRes = await get('paper/category/list', {
				course_id: id,
				level: 1
			});
			that.categoryList = categoryRes.data;

		},
		onLearn(options) {
			let	url = '/pages/practice/material/list?title=' + that.info.name + '&id=' + that.info.id
			uni.navigateTo({
				url: url
			});
		},
		async onQuestionTypePractice() {
			const countInfo = await get('question/getCount', {
				course_id: that.info.id,
			});
			const countInfoData = countInfo.data;
			if (countInfoData.count <= 0) {
				app.showToast('题库未上传题目');
				return;
			}
			let url = '../topic/topic?mainType=0&title=' + that.info.name + '&code=' + that.info.code + '&id=' +
				that.info.id + '&chargeType=1';
			uni.navigateTo({
				url: url
			});
		},
		async onOrderPractice() {
			const countInfo = await get('question/getCount', {
				course_id: that.info.id,
			});
			const countInfoData = countInfo.data;
			if (countInfoData.count <= 0) {
				app.showToast('题库未上传题目');
				return;
			}
			let url =
				'../practice?title=' +
				that.info.name +
				'&mainType=0' +
				'&id=' +
				that.info.id +
				'&max_page=' + countInfoData.max_page;
			uni.navigateTo({
				url: url
			});
		},
		onCategory(cate) {
			console.log(cate);
			let url = '';
			if (cate.is_multi_level) {
				// 多级分类则进入章节题目
				url = '/pages/practice/paper/category?title=' + cate.name + '&category_id=' + cate.id + '&course_id=' +
					that.info.id;
			} else {
				// 单层级直接进入试卷中心
				url = '/pages/practice/paper/paper?title=' + cate.name + '&category_id=' + cate.id
			}
			uni.navigateTo({
				url: url
			});
		},
		onCollect() {
			app.globalData.server
				.postRequest('v2/joinCourses', {
					course_id: that.info.id,
					join: that.info.collect != 1 ? 0 : 1
				})
				.then(function(e) {
					let info = that.info;
					info.collect = info.collect == 1 ? 2 : 1;
					that.setData({
						info: info,
					});
				})
				.catch(function(e) {
					app.showToast('收藏失败');
				});
		},
		onSearchQuestion() {
			let url = '/pages/search/list?selectModelIndex=1&course_id=' + that.info.id;
			console.log(url);
			uni.navigateTo({
				url: url
			});
		},
		onErrorQuestion() {
			let url = '/pages/practice/error/error?course_id=' + that.info.id;
			uni.navigateTo({
				url: url
			});
		},
		onBuyCourse() {
			let url = '/pages/practice/course/buy?id=' + that.info.id;
			uni.navigateTo({
				url: url
			});
		},
		onColl() {
			let url = '/pages/practice/coll/coll?course_id=' + that.info.id;
			uni.navigateTo({
				url: url
			});
		},
		onNote() {
			app.showToast('敬请期待');
			return;
		},
		showOnlineServiceTap() {
			that.showOnlineServiceNotice = true;
		},
		// 激活成功回调
		onActivateSuccess(data) {
			// 刷新课程信息
			that.getInfo(that.info.id);
		}
	}
};
</script>
